<template>
  <div id="feedbackInfo">
    <v-header title="问题详情" :saveShow="false" :showDownloadBtn="false"></v-header>
    <div style="height: calc(100% - 56px); padding: 10px 0 20px 10px;">
      <div class="header">
        <el-button type="text" icon="el-icon-arrow-left" class="back-btn" @click="comeback()">返回</el-button>
        <p>{{ bugListOpt.pro_title }}</p>
      </div>
      <div class="info">
        <div class="info_main">
          <div class="main_right">
            <div class="right_header">
              <p style="font-size: 16px;word-break: break-all;word-wrap: break-word">{{ bugListOpt.pro_desc }}</p>
            </div>
            <div class="detailed">
              <div class="detailedInfo">
                <el-tabs v-model="tabs" @tab-click="tabsClick">
                  <el-tab-pane label="问题详情" name="device">
                    <div class="deviceinfo">
                      <el-row>
                        <el-col :span="12">问题标题: {{ bugListOpt.pro_title }}</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">问题描述: {{ bugListOpt.pro_desc }}</el-col>
                        <el-col :span="12">反馈时间: {{ bugListOpt.pro_time }}</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">设备id: {{ bugListOpt.dev_id }}</el-col>
                        <el-col :span="12">应用id: {{ bugListOpt.app_id }}</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">应用版本: {{ bugListOpt.app_ver }}</el-col>
                      </el-row>
                    </div>
                  </el-tab-pane>
                  <!--<el-tab-pane label="堆栈信息" name="stack">
                    <div class="stack">
                      <code style="white-space: pre-wrap">{{stack}}</code>
                    </div>
                  </el-tab-pane>-->
                </el-tabs>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { VHeader } from '../../components'
  import { nextPage } from '../../assets/js/index'
  import { mapGetters } from 'vuex'
  import ajax from '../../api/ajax/ajax'
  import api from '../../api/url'
  export default{
    components: {
      VHeader
    },
    data () {
      return {
        tabs: 'device'
      }
    },
    computed: {
      ...mapGetters([
        'bugListOpt'
      ])
    },
    methods: {
      test () {
        this.querySelectDetailPro()
      },
      tabsClick (tab) {},
      // 点击返回
      comeback () {
        nextPage('/home/feedback')
      },
      // 查询问题详情---暂时没用
      querySelectDetailPro () {
        let params = {
          id: this.bugListOpt.id
        }
        ajax.post(api.SELECT_DETAIL_PRO, params)
          .then(res => {
            console.log('问题详情=', res)
          })
      }
    },
    mounted () {}
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
#feedbackInfo
  height 100%
  .header
    height 60px
    border-bottom 1px solid #f8f8f8
    background-color #fff
    padding 10px 15px
    font-size 16px
    line-height 40px
    color #000
    .back-btn
      float left
      font-size 14px
      padding 0
      line-height 40px
      height 40px
    p
      float left
      margin-left 25px
      text-align left
      .avatar
        width 50px
        height 50px
        border-radius 50%
        background-color red
  .info
    .info_header
      height 50px
      line-height 50px
      padding 0 15px
      background-color #ffffff
      border-bottom 1px solid #f8f8f8
    .info_header:after, .info_main:after
      content ''
      display table
      clear both
    .info_main
      background-color #fff
      .main_right
        margin 0 auto
        padding 10px 15px
        width 100%
        background-color #fff
        .right_header
          height 30px
          line-height 30px
        .detailed
          .detailedInfo
            min-height 400px
            .el-collapse
              border-top 0 none
              .el-row
                margin-bottom 0
              .el-col
                height 30px
                line-height 30px
            .deviceinfo
              .el-row
                line-height 30px
</style>
